<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"lanqilu.github.io","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":true},"copycode":{"enable":true,"show_result":true,"style":null},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":false,"color":"#395ca3","save":"auto"},"fancybox":true,"mediumzoom":false,"lazyload":false,"pangu":true,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="CSS学习笔记">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS学习笔记">
<meta property="og:url" content="https://lanqilu.github.io/2019/08/13/Web/CSS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="Halo">
<meta property="og:description" content="CSS学习笔记">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2019-08-13T01:39:50.000Z">
<meta property="article:modified_time" content="2020-08-10T08:20:44.591Z">
<meta property="article:author" content="Lanqilu">
<meta property="article:tag" content="CSS">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://lanqilu.github.io/2019/08/13/Web/CSS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>CSS学习笔记 | Halo</title>
  
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-161500949-1"></script>
    <script data-pjax>
      if (CONFIG.hostname === location.hostname) {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-161500949-1');
      }
    </script>


  <script data-pjax>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?256151d1651e9d73ec980b2fc69de8f6";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Halo</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签<span class="badge">39</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类<span class="badge">18</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档<span class="badge">85</span></a>

  </li>
        <li class="menu-item menu-item-python">

    <a href="/categories/Python/" rel="section"><i class="fa fa-fw fa-code"></i>Python</a>

  </li>
        <li class="menu-item menu-item-java">

    <a href="/categories/Java/" rel="section"><i class="fa fa-fw fa-code"></i>Java</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://lanqilu.github.io/2019/08/13/Web/CSS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="http://img.whl123456.top/image/avatar.jpg">
      <meta itemprop="name" content="Lanqilu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Halo">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          CSS学习笔记
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-08-13 09:39:50" itemprop="dateCreated datePublished" datetime="2019-08-13T09:39:50+08:00">2019-08-13</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-08-10 16:20:44" itemprop="dateModified" datetime="2020-08-10T16:20:44+08:00">2020-08-10</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Web/" itemprop="url" rel="index"><span itemprop="name">Web</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <div class="note info no-icon">
            <p><a href="https://www.w3school.com.cn/css/css_jianjie.asp" target="_blank" rel="noopener">CSS</a>学习笔记</p>
          </div>
<a id="more"></a>

<h1 id="CSS-简介"><a href="#CSS-简介" class="headerlink" title="CSS 简介"></a>CSS 简介</h1><h2 id="CSS-概述"><a href="#CSS-概述" class="headerlink" title="CSS 概述"></a>CSS 概述</h2><ul>
<li>CSS 指层叠样式表 (<strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets)</li>
<li>样式定义<strong>如何显示</strong> HTML 元素</li>
<li>样式通常存储在<strong>样式表</strong>中</li>
<li>把样式添加到 HTML 4.0 中，是为了<strong>解决内容与表现分离的问题</strong></li>
<li><strong>外部样式表</strong>可以极大提高工作效率</li>
<li>外部样式表通常存储在 <strong>CSS 文件</strong>中</li>
<li>多个样式定义可<strong>层叠</strong>为一</li>
</ul>
<h3 id="样式解决了一个普遍的问题"><a href="#样式解决了一个普遍的问题" class="headerlink" title="样式解决了一个普遍的问题"></a>样式解决了一个普遍的问题</h3><p>HTML 标签原本被设计为用于定义文档内容。通过使用 <code>&lt;h1&gt;</code>、<code>&lt;p&gt;</code>、<code>&lt;table&gt;</code> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。</p>
<p>由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。</p>
<p>为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。</p>
<p>所有的主流浏览器均支持层叠样式表。</p>
<h3 id="样式表极大地提高了工作效率"><a href="#样式表极大地提高了工作效率" class="headerlink" title="样式表极大地提高了工作效率"></a>样式表极大地提高了工作效率</h3><p>样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。</p>
<p>由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。</p>
<h3 id="多重样式将层叠为一个"><a href="#多重样式将层叠为一个" class="headerlink" title="多重样式将层叠为一个"></a>多重样式将层叠为一个</h3><p>样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。</p>
<h4 id="层叠次序-优先顺序"><a href="#层叠次序-优先顺序" class="headerlink" title="层叠次序(优先顺序)"></a>层叠次序(优先顺序)</h4><p><strong>当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？</strong></p>
<p>一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。</p>
<ol>
<li>浏览器缺省设置</li>
<li>外部样式表</li>
<li>内部样式表（位于 <code>&lt;head&gt;</code>标签内部）</li>
<li>内联样式（在 HTML 元素内部）</li>
</ol>
<p>因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<code>&lt;head&gt;</code> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。</p>
<h2 id="CSS-基础语法"><a href="#CSS-基础语法" class="headerlink" title="CSS 基础语法"></a>CSS 基础语法</h2><h3 id="CSS-语法"><a href="#CSS-语法" class="headerlink" title="CSS 语法"></a>CSS 语法</h3><p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">selector &#123;declaration1; declaration2; ... declarationN &#125;</span><br></pre></td></tr></table></figure>

<p>选择器通常是您需要改变样式的 HTML 元素。</p>
<p>每条声明由一个属性和一个值组成。</p>
<p>属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">selector</span> &#123;<span class="attribute">property</span>: value&#125;</span><br></pre></td></tr></table></figure>

<p>下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。</p>
<p>在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span> &#123;<span class="attribute">color</span>:red; <span class="attribute">font-size</span>:<span class="number">14px</span>;&#125;</span><br></pre></td></tr></table></figure>

<h3 id="值的不同写法和单位"><a href="#值的不同写法和单位" class="headerlink" title="值的不同写法和单位"></a>值的不同写法和单位</h3><p>除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123; <span class="attribute">color</span>: <span class="number">#ff0000</span>; &#125;</span><br></pre></td></tr></table></figure>

<p>为了节约字节，我们可以使用 CSS 的缩写形式：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123; <span class="attribute">color</span>: <span class="number">#f00</span>; &#125;</span><br></pre></td></tr></table></figure>

<p>我们还可以通过两种方法使用 RGB 值：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123; <span class="attribute">color</span>: <span class="built_in">rgb</span>(<span class="number">255</span>,<span class="number">0</span>,<span class="number">0</span>); &#125;</span><br><span class="line"><span class="selector-tag">p</span> &#123; <span class="attribute">color</span>: <span class="built_in">rgb</span>(<span class="number">100%</span>,<span class="number">0%</span>,<span class="number">0%</span>); &#125;</span><br></pre></td></tr></table></figure>

<p>请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。</p>
<h3 id="记得写引号"><a href="#记得写引号" class="headerlink" title="记得写引号"></a>记得写引号</h3><p><strong>提示：</strong>如果值为若干单词，则要给值加引号：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;<span class="attribute">font-family</span>: <span class="string">"sans serif"</span>;&#125;</span><br></pre></td></tr></table></figure>

<h3 id="多重声明："><a href="#多重声明：" class="headerlink" title="多重声明："></a>多重声明：</h3><p><strong>提示：</strong>如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;<span class="attribute">text-align</span>:center; <span class="attribute">color</span>:red;&#125;</span><br></pre></td></tr></table></figure>

<p>你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">color</span>: black;</span><br><span class="line">  <span class="attribute">font-family</span>: arial;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="空格和大小写"><a href="#空格和大小写" class="headerlink" title="空格和大小写"></a>空格和大小写</h3><p>大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: Georgia, Palatino, serif;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。</p>
<h2 id="CSS-高级语法"><a href="#CSS-高级语法" class="headerlink" title="CSS 高级语法"></a>CSS 高级语法</h2><h3 id="选择器的分组"><a href="#选择器的分组" class="headerlink" title="选择器的分组"></a>选择器的分组</h3><p>你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span>,<span class="selector-tag">h2</span>,<span class="selector-tag">h3</span>,<span class="selector-tag">h4</span>,<span class="selector-tag">h5</span>,<span class="selector-tag">h6</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: green;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="继承及其问题"><a href="#继承及其问题" class="headerlink" title="继承及其问题"></a>继承及其问题</h3><p>根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">     <span class="attribute">font-family</span>: Verdana, sans-serif;</span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure>

<p>根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。</p>
<p>通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。</p>
<p>但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？</p>
<h3 id="友善地对待Netscape-4"><a href="#友善地对待Netscape-4" class="headerlink" title="友善地对待Netscape 4"></a>友善地对待Netscape 4</h3><p>幸运地是，你可以通过使用我们称为 “Be Kind to Netscape 4” 的冗余法则来处理旧式浏览器无法理解继承的问题。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>  &#123;</span><br><span class="line">     <span class="attribute">font-family</span>: Verdana, sans-serif;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span>, <span class="selector-tag">td</span>, <span class="selector-tag">ul</span>, <span class="selector-tag">ol</span>, <span class="selector-tag">li</span>, <span class="selector-tag">dl</span>, <span class="selector-tag">dt</span>, <span class="selector-tag">dd</span>  &#123;</span><br><span class="line">     <span class="attribute">font-family</span>: Verdana, sans-serif;</span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure>

<p>4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做。</p>
<h3 id="继承是一个诅咒吗？"><a href="#继承是一个诅咒吗？" class="headerlink" title="继承是一个诅咒吗？"></a>继承是一个诅咒吗？</h3><p>如果你不希望 “Verdana, sans-serif” 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>  &#123;</span><br><span class="line">     <span class="attribute">font-family</span>: Verdana, sans-serif;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">td</span>, <span class="selector-tag">ul</span>, <span class="selector-tag">ol</span>, <span class="selector-tag">ul</span>, <span class="selector-tag">li</span>, <span class="selector-tag">dl</span>, <span class="selector-tag">dt</span>, <span class="selector-tag">dd</span>  &#123;</span><br><span class="line">     <span class="attribute">font-family</span>: Verdana, sans-serif;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span>  &#123;</span><br><span class="line">     <span class="attribute">font-family</span>: Times, <span class="string">"Times New Roman"</span>, serif;</span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure>

<h2 id="CSS-派生选择器"><a href="#CSS-派生选择器" class="headerlink" title="CSS 派生选择器"></a>CSS 派生选择器</h2><h3 id="派生选择器"><a href="#派生选择器" class="headerlink" title="派生选择器"></a>派生选择器</h3><p><strong>通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。</strong></p>
<p>在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。</p>
<p>派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。</p>
<p>比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">li</span> <span class="selector-tag">strong</span> &#123;</span><br><span class="line">    <span class="attribute">font-style</span>: italic;</span><br><span class="line">    <span class="attribute">font-weight</span>: normal;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>请注意标记为 <code>&lt;strong&gt;</code> 的蓝色代码的上下文关系：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;&lt;strong&gt;我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用&lt;/strong&gt;&lt;/p&gt;</span><br><span class="line"></span><br><span class="line">&lt;<span class="selector-tag">ol</span>&gt;</span><br><span class="line">&lt;li&gt;&lt;strong&gt;我是斜体字。这是因为 strong 元素位于 li 元素内。&lt;/strong&gt;&lt;/li&gt;</span><br><span class="line">&lt;li&gt;我是正常的字体。&lt;/li&gt;</span><br><span class="line">&lt;/ol&gt;</span><br></pre></td></tr></table></figure>

<p>在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。</p>
<p>再看看下面的 CSS 规则：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">strong</span> &#123;</span><br><span class="line">     <span class="attribute">color</span>: red;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h2</span> &#123;</span><br><span class="line">     <span class="attribute">color</span>: red;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h2</span> <span class="selector-tag">strong</span> &#123;</span><br><span class="line">     <span class="attribute">color</span>: blue;</span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure>

<p>下面是它施加影响的 HTML：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>The strongly emphasized word in this paragraph is<span class="tag">&lt;<span class="name">strong</span>&gt;</span>red<span class="tag">&lt;/<span class="name">strong</span>&gt;</span>.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>This subhead is also red.<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>The strongly emphasized word in this subhead is<span class="tag">&lt;<span class="name">strong</span>&gt;</span>blue<span class="tag">&lt;/<span class="name">strong</span>&gt;</span>.<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="CSS-id-选择器"><a href="#CSS-id-选择器" class="headerlink" title="CSS id 选择器"></a>CSS id 选择器</h2><h3 id="id-选择器"><a href="#id-选择器" class="headerlink" title="id 选择器"></a>id 选择器</h3><p><strong>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。</strong></p>
<p><strong>id 选择器以 “#” 来定义。</strong></p>
<p>下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#red</span> &#123;<span class="attribute">color</span>:red;&#125;</span><br><span class="line"><span class="selector-id">#green</span> &#123;<span class="attribute">color</span>:green;&#125;</span><br></pre></td></tr></table></figure>

<p>下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;p id="red"&gt;这个段落是红色。&lt;/p&gt;</span><br><span class="line">&lt;p id="green"&gt;这个段落是绿色。&lt;/p&gt;</span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong>id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 <a href="https://www.w3school.com.cn/xhtml/xhtml_structural_01.asp" target="_blank" rel="noopener">XHTML:网站重构</a>。</p>
<h3 id="id-选择器和派生选择器"><a href="#id-选择器和派生选择器" class="headerlink" title="id 选择器和派生选择器"></a>id 选择器和派生选择器</h3><p><strong>在现代布局中，id 选择器常常用于建立派生选择器。</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#sidebar</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">	<span class="attribute">font-style</span>: italic;</span><br><span class="line">	<span class="attribute">text-align</span>: right;</span><br><span class="line">	<span class="attribute">margin-top</span>: <span class="number">0.5em</span>;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<p>上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如<code>&lt;em&gt;</code> <code>&lt;/em&gt;</code> 或者<code>&lt;span&gt;</code> <code>&lt;/span&gt;</code>，不过这样的用法是非法的，因为不可以在内联元素 <code>&lt;span&gt;</code> 中嵌入<code>&lt;p&gt;</code> （如果你忘记了原因，请参阅 <a href="https://www.w3school.com.cn/xhtml/xhtml_structural_01.asp" target="_blank" rel="noopener">XHTML:网站重构</a>）。</p>
<h4 id="一个选择器，多种用法"><a href="#一个选择器，多种用法" class="headerlink" title="一个选择器，多种用法"></a>一个选择器，多种用法</h4><p><strong>即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#sidebar</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">	<span class="attribute">font-style</span>: italic;</span><br><span class="line">	<span class="attribute">text-align</span>: right;</span><br><span class="line">	<span class="attribute">margin-top</span>: <span class="number">0.5em</span>;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#sidebar</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">1em</span>;</span><br><span class="line">	<span class="attribute">font-weight</span>: normal;</span><br><span class="line">	<span class="attribute">font-style</span>: italic;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">	<span class="attribute">text-align</span>: right;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<p>在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。</p>
<h3 id="单独的选择器"><a href="#单独的选择器" class="headerlink" title="单独的选择器"></a>单独的选择器</h3><p><strong>id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#sidebar</span> &#123;</span><br><span class="line">	<span class="attribute">border</span>: <span class="number">1px</span> dotted <span class="number">#000</span>;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<p>根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> <span class="selector-id">#sidebar</span> &#123;</span><br><span class="line">	<span class="attribute">border</span>: <span class="number">1px</span> dotted <span class="number">#000</span>;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="CSS-类选择器"><a href="#CSS-类选择器" class="headerlink" title="CSS 类选择器"></a>CSS 类选择器</h3><p><strong>在 CSS 中，类选择器以一个点号显示：</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.center</span> &#123;<span class="attribute">text-align</span>: center&#125;</span><br></pre></td></tr></table></figure>

<p>在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。</p>
<p>在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 class="center"&gt;</span><br><span class="line"><span class="selector-tag">This</span> <span class="selector-tag">heading</span> <span class="selector-tag">will</span> <span class="selector-tag">be</span> <span class="selector-tag">center-aligned</span></span><br><span class="line">&lt;/h1&gt;</span><br><span class="line"></span><br><span class="line">&lt;p class="center"&gt;</span><br><span class="line"><span class="selector-tag">This</span> <span class="selector-tag">paragraph</span> <span class="selector-tag">will</span> <span class="selector-tag">also</span> <span class="selector-tag">be</span> <span class="selector-tag">center-aligned</span>.</span><br><span class="line">&lt;/p&gt;</span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong>类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。</p>
<p><strong>和 id 一样，class 也可被用作派生选择器：</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.fancy</span> <span class="selector-tag">td</span> &#123;</span><br><span class="line">	<span class="attribute">color</span>: <span class="number">#f60</span>;</span><br><span class="line">	<span class="attribute">background</span>: <span class="number">#666</span>;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<p>在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）</p>
<p><strong>元素也可以基于它们的类而被选择：</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">td</span><span class="selector-class">.fancy</span> &#123;</span><br><span class="line">	<span class="attribute">color</span>: <span class="number">#f60</span>;</span><br><span class="line">	<span class="attribute">background</span>: <span class="number">#666</span>;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<p>在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;td class="fancy"&gt;</span><br></pre></td></tr></table></figure>

<p>你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。</p>
<h2 id="创建-CSS"><a href="#创建-CSS" class="headerlink" title="创建 CSS"></a>创建 CSS</h2><h3 id="如何插入样式表"><a href="#如何插入样式表" class="headerlink" title="如何插入样式表"></a>如何插入样式表</h3><p><strong>当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：</strong></p>
<h3 id="外部样式表"><a href="#外部样式表" class="headerlink" title="外部样式表"></a>外部样式表</h3><p>当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <code>&lt;link&gt;</code>标签链接到样式表。<code>&lt;link&gt;</code> 标签在（文档的）头部：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"mystyle.css"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。</p>
<p>外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">hr</span> &#123;<span class="attribute">color</span>: sienna;&#125;</span><br><span class="line"><span class="selector-tag">p</span> &#123;<span class="attribute">margin-left</span>: <span class="number">20px</span>;&#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123;<span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">"images/back40.gif"</span>);&#125;</span><br></pre></td></tr></table></figure>

<p>不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。</p>
<h3 id="内部样式表"><a href="#内部样式表" class="headerlink" title="内部样式表"></a>内部样式表</h3><p>当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <code>&lt;style&gt;</code> 标签在文档头部定义内部样式表，就像这样:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-tag">hr</span> &#123;<span class="attribute">color</span>: sienna;&#125;</span></span><br><span class="line"><span class="css">  <span class="selector-tag">p</span> &#123;<span class="attribute">margin-left</span>: <span class="number">20px</span>;&#125;</span></span><br><span class="line"><span class="css">  <span class="selector-tag">body</span> &#123;<span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">"images/back40.gif"</span>);&#125;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="内联样式"><a href="#内联样式" class="headerlink" title="内联样式"></a>内联样式</h3><p>由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。</p>
<p>要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">"color: sienna; margin-left: 20px"</span>&gt;</span></span><br><span class="line">This is a paragraph</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="多重样式"><a href="#多重样式" class="headerlink" title="多重样式"></a>多重样式</h3><p>如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。</p>
<p>例如，外部样式表拥有针对 h3 选择器的三个属性：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h3</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">8pt</span>;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>而内部样式表拥有针对 h3 选择器的两个属性：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h3</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: right; </span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20pt</span>;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">color</span>: <span class="selector-tag">red</span>; </span><br><span class="line"><span class="selector-tag">text-align</span>: <span class="selector-tag">right</span>; </span><br><span class="line"><span class="selector-tag">font-size</span>: 20<span class="selector-tag">pt</span>;</span><br></pre></td></tr></table></figure>

<p>即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。</p>
<h1 id="CSS样式"><a href="#CSS样式" class="headerlink" title="CSS样式"></a>CSS样式</h1><h2 id="CSS-背景"><a href="#CSS-背景" class="headerlink" title="CSS 背景"></a>CSS 背景</h2><p><strong>CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。</strong></p>
<p><strong>CSS 在这方面的能力远远在 HTML 之上。</strong></p>
<h3 id="背景色"><a href="#背景色" class="headerlink" title="背景色"></a>背景色</h3><p>可以使用 <a href="https://www.w3school.com.cn/cssref/pr_background-color.asp" target="_blank" rel="noopener">background-color 属性</a>为元素设置背景色。这个属性接受任何合法的颜色值。</p>
<p>这条规则把元素的背景设置为灰色：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;<span class="attribute">background-color</span>: gray;&#125;</span><br></pre></td></tr></table></figure>

<p>如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;<span class="attribute">background-color</span>: gray; <span class="attribute">padding</span>: <span class="number">20px</span>;&#125;</span><br></pre></td></tr></table></figure>

<p>可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。</p>
<p>background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。</p>
<h3 id="背景图像"><a href="#背景图像" class="headerlink" title="背景图像"></a>背景图像</h3><p>要把图像放入背景，需要使用 <a href="https://www.w3school.com.cn/cssref/pr_background-image.asp" target="_blank" rel="noopener">background-image 属性</a>。background-image 属性的默认值是 none，表示背景上没有放置任何图像。</p>
<p>如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;<span class="attribute">background-image</span>: <span class="built_in">url</span>(/i/eg_bg_04.gif);&#125;</span><br></pre></td></tr></table></figure>

<p>大多数背景都应用到 body 元素，不过并不仅限于此。</p>
<p>下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-class">.flower</span> &#123;<span class="attribute">background-image</span>: <span class="built_in">url</span>(/i/eg_bg_03.gif);&#125;</span><br></pre></td></tr></table></figure>

<p>您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-class">.radio</span> &#123;<span class="attribute">background-image</span>: <span class="built_in">url</span>(/i/eg_bg_07.gif);&#125;</span><br></pre></td></tr></table></figure>

<p>理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。</p>
<p>另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。</p>
<h3 id="背景重复"><a href="#背景重复" class="headerlink" title="背景重复"></a>背景重复</h3><p>如果需要在页面上对背景图像进行平铺，可以使用 <a href="https://www.w3school.com.cn/cssref/pr_background-repeat.asp" target="_blank" rel="noopener">background-repeat 属性</a>。</p>
<p>属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。</p>
<p>默认地，背景图像将从一个元素的左上角开始。请看下面的例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">body</span><br><span class="line">  &#123; </span><br><span class="line">  background-image: url(&#x2F;i&#x2F;eg_bg_03.gif);</span><br><span class="line">  background-repeat: repeat-y;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="背景定位"><a href="#背景定位" class="headerlink" title="背景定位"></a>背景定位</h3><p>可以利用 <a href="https://www.w3school.com.cn/cssref/pr_background-position.asp" target="_blank" rel="noopener">background-position 属性</a>改变图像在背景中的位置。</p>
<p>下面的例子在 body 元素中将一个背景图像居中放置：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span></span><br><span class="line">  &#123; </span><br><span class="line">    <span class="attribute">background-image</span>:<span class="built_in">url</span>(<span class="string">'/i/eg_bg_03.gif'</span>);</span><br><span class="line">    <span class="attribute">background-repeat</span>:no-repeat;</span><br><span class="line">    <span class="attribute">background-position</span>:center;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。</p>
<h3 id="关键字"><a href="#关键字" class="headerlink" title="关键字"></a>关键字</h3><p>图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。</p>
<p>根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。</p>
<p>如果只出现一个关键字，则认为另一个关键字是 center。</p>
<p>所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span></span><br><span class="line">  &#123; </span><br><span class="line">    <span class="attribute">background-image</span>:<span class="built_in">url</span>(<span class="string">'bgimg.gif'</span>);</span><br><span class="line">    <span class="attribute">background-repeat</span>:no-repeat;</span><br><span class="line">    <span class="attribute">background-position</span>:top;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>下面是等价的位置关键字：</p>
<table>
<thead>
<tr>
<th align="left">单一关键字</th>
<th align="left">等价的关键字</th>
</tr>
</thead>
<tbody><tr>
<td align="left">center</td>
<td align="left">center center</td>
</tr>
<tr>
<td align="left">top</td>
<td align="left">top center 或 center top</td>
</tr>
<tr>
<td align="left">bottom</td>
<td align="left">bottom center 或 center bottom</td>
</tr>
<tr>
<td align="left">right</td>
<td align="left">right center 或 center right</td>
</tr>
<tr>
<td align="left">left</td>
<td align="left">left center 或 center left</td>
</tr>
</tbody></table>
<h3 id="百分数值"><a href="#百分数值" class="headerlink" title="百分数值"></a>百分数值</h3><p>百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span></span><br><span class="line">  &#123; </span><br><span class="line">    <span class="attribute">background-image</span>:<span class="built_in">url</span>(<span class="string">'/i/eg_bg_03.gif'</span>);</span><br><span class="line">    <span class="attribute">background-repeat</span>:no-repeat;</span><br><span class="line">    <span class="attribute">background-position</span>:<span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>这会导致图像适当放置，其中心与其元素的中心对齐。<strong>换句话说，百分数值同时应用于元素和图像。</strong>也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。</p>
<p>如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。</p>
<p>因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span></span><br><span class="line">  &#123; </span><br><span class="line">    <span class="attribute">background-image</span>:<span class="built_in">url</span>(<span class="string">'/i/eg_bg_03.gif'</span>);</span><br><span class="line">    <span class="attribute">background-repeat</span>:no-repeat;</span><br><span class="line">    <span class="attribute">background-position</span>:<span class="number">66%</span> <span class="number">33%</span>;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。</p>
<p>background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。</p>
<h3 id="长度值"><a href="#长度值" class="headerlink" title="长度值"></a>长度值</h3><p>长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。</p>
<p>比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span></span><br><span class="line">  &#123; </span><br><span class="line">    <span class="attribute">background-image</span>:<span class="built_in">url</span>(<span class="string">'/i/eg_bg_03.gif'</span>);</span><br><span class="line">    <span class="attribute">background-repeat</span>:no-repeat;</span><br><span class="line">    <span class="attribute">background-position</span>:<span class="number">50px</span> <span class="number">100px</span>;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。</p>
<h3 id="背景关联"><a href="#背景关联" class="headerlink" title="背景关联"></a>背景关联</h3><p>如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。</p>
<p>您可以通过 <a href="https://www.w3school.com.cn/cssref/pr_background-attachment.asp" target="_blank" rel="noopener">background-attachment 属性</a>防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> </span><br><span class="line">  &#123;</span><br><span class="line">  <span class="attribute">background-image</span>:<span class="built_in">url</span>(/i/eg_bg_02.gif);</span><br><span class="line">  <span class="attribute">background-repeat</span>:no-repeat;</span><br><span class="line">  <span class="attribute">background-attachment</span>:fixed</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="CSS-背景属性"><a href="#CSS-背景属性" class="headerlink" title="CSS 背景属性"></a>CSS 背景属性</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_background.asp" target="_blank" rel="noopener">background</a></td>
<td align="left">简写属性，作用是将背景属性设置在一个声明中。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_background-attachment.asp" target="_blank" rel="noopener">background-attachment</a></td>
<td align="left">背景图像是否固定或者随着页面的其余部分滚动。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_background-color.asp" target="_blank" rel="noopener">background-color</a></td>
<td align="left">设置元素的背景颜色。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_background-image.asp" target="_blank" rel="noopener">background-image</a></td>
<td align="left">把图像设置为背景。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_background-position.asp" target="_blank" rel="noopener">background-position</a></td>
<td align="left">设置背景图像的起始位置。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_background-repeat.asp" target="_blank" rel="noopener">background-repeat</a></td>
<td align="left">设置背景图像是否及如何重复。</td>
</tr>
</tbody></table>
<h3 id="CSS-背景实例"><a href="#CSS-背景实例" class="headerlink" title="CSS 背景实例"></a>CSS 背景实例</h3><ul>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-color" target="_blank" rel="noopener">设置背景颜色</a></p>
<p>本例演示如何为元素设置背景颜色。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_text_background" target="_blank" rel="noopener">设置文本的背景颜色</a></p>
<p>本例颜色如何设置部分文本的背景颜色。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-image" target="_blank" rel="noopener">将图像设置为背景</a></p>
<p>本例演示如何将图像设置为背景。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-image_2" target="_blank" rel="noopener">将图像设置为背景 2</a></p>
<p>本例演示如何为多个元素同时设置背景图像。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-repeat" target="_blank" rel="noopener">如何重复背景图像</a></p>
<p>本例演示如何重复背景图像。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-repeaty" target="_blank" rel="noopener">如何在垂直方向重复背景图像</a></p>
<p>本例演示如何垂直地重复背景图像。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-repeatx" target="_blank" rel="noopener">如何在水平方向重复背景图像</a></p>
<p>本例演示如何水平地重复背景图像。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-repeat_no-repeat" target="_blank" rel="noopener">如何仅显示一次背景图像</a></p>
<p>本例演示如何仅显示一次背景图像。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-position" target="_blank" rel="noopener">如何放置背景图像</a></p>
<p>本例演示如何在页面上放置背景图像。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-position_percent" target="_blank" rel="noopener">如何使用%来定位背景图像</a></p>
<p>本例演示如何使用百分比来在页面上定位背景图像。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-position_pixel" target="_blank" rel="noopener">如何使用像素来定位背景图像</a></p>
<p>本例演示如何使用像素来在页面上定位背景图像。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment" target="_blank" rel="noopener">如何设置固定的背景图像</a></p>
<p>本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。</p>
</li>
<li><p><a href="https://www.w3school.com.cn/tiy/t.asp?f=csse_background" target="_blank" rel="noopener">所有背景属性在一个声明之中</a></p>
<p>本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。</p>
</li>
</ul>
<h2 id="CSS-文本"><a href="#CSS-文本" class="headerlink" title="CSS 文本"></a><a href="https://www.w3school.com.cn/css/css_text.asp" target="_blank" rel="noopener">CSS 文本</a></h2><p><strong>CSS 文本属性可定义文本的外观。</strong></p>
<p><strong>通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。</strong></p>
<h2 id="CSS-文本属性"><a href="#CSS-文本属性" class="headerlink" title="CSS 文本属性"></a>CSS 文本属性</h2><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_color.asp" target="_blank" rel="noopener">color</a></td>
<td align="left">设置文本颜色</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_direction.asp" target="_blank" rel="noopener">direction</a></td>
<td align="left">设置文本方向。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_dim_line-height.asp" target="_blank" rel="noopener">line-height</a></td>
<td align="left">设置行高。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_letter-spacing.asp" target="_blank" rel="noopener">letter-spacing</a></td>
<td align="left">设置字符间距。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_text-align.asp" target="_blank" rel="noopener">text-align</a></td>
<td align="left">对齐元素中的文本。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_text-decoration.asp" target="_blank" rel="noopener">text-decoration</a></td>
<td align="left">向文本添加修饰。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_text-indent.asp" target="_blank" rel="noopener">text-indent</a></td>
<td align="left">缩进元素中文本的首行。</td>
</tr>
<tr>
<td align="left">text-shadow</td>
<td align="left">设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_text-transform.asp" target="_blank" rel="noopener">text-transform</a></td>
<td align="left">控制元素中的字母。</td>
</tr>
<tr>
<td align="left">unicode-bidi</td>
<td align="left">设置文本方向。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_white-space.asp" target="_blank" rel="noopener">white-space</a></td>
<td align="left">设置元素中空白的处理方式。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_text_word-spacing.asp" target="_blank" rel="noopener">word-spacing</a></td>
<td align="left">设置字间距。</td>
</tr>
</tbody></table>
<h2 id="CSS-字体"><a href="#CSS-字体" class="headerlink" title="CSS 字体"></a><a href="https://www.w3school.com.cn/css/css_font.asp" target="_blank" rel="noopener">CSS 字体</a></h2><p><strong>CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。</strong></p>
<h3 id="CSS-字体属性"><a href="#CSS-字体属性" class="headerlink" title="CSS 字体属性"></a>CSS 字体属性</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_font_font.asp" target="_blank" rel="noopener">font</a></td>
<td align="left">简写属性。作用是把所有针对字体的属性设置在一个声明中。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_font_font-family.asp" target="_blank" rel="noopener">font-family</a></td>
<td align="left">设置字体系列。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_font_font-size.asp" target="_blank" rel="noopener">font-size</a></td>
<td align="left">设置字体的尺寸。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_font_font-size-adjust.asp" target="_blank" rel="noopener">font-size-adjust</a></td>
<td align="left">当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_font_font-stretch.asp" target="_blank" rel="noopener">font-stretch</a></td>
<td align="left">对字体进行水平拉伸。（CSS2.1 已删除该属性。）</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_font_font-style.asp" target="_blank" rel="noopener">font-style</a></td>
<td align="left">设置字体风格。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_font_font-variant.asp" target="_blank" rel="noopener">font-variant</a></td>
<td align="left">以小型大写字体或者正常字体显示文本。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_font_weight.asp" target="_blank" rel="noopener">font-weight</a></td>
<td align="left">设置字体的粗细。</td>
</tr>
</tbody></table>
<h2 id="CSS-链接"><a href="#CSS-链接" class="headerlink" title="CSS 链接"></a><a href="https://www.w3school.com.cn/css/css_link.asp" target="_blank" rel="noopener">CSS 链接</a></h2><p><strong>我们能够以不同的方法为链接设置样式。</strong></p>
<h3 id="设置链接的样式"><a href="#设置链接的样式" class="headerlink" title="设置链接的样式"></a>设置链接的样式</h3><p>能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。</p>
<p>链接的特殊性在于能够根据它们所处的状态来设置它们的样式。</p>
<p>链接的四种状态：</p>
<ul>
<li>a:link - 普通的、未被访问的链接</li>
<li>a:visited - 用户已访问的链接</li>
<li>a:hover - 鼠标指针位于链接的上方</li>
<li>a:active - 链接被点击的时刻</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;<span class="attribute">color</span>:<span class="number">#FF0000</span>;&#125;		<span class="comment">/* 未被访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;<span class="attribute">color</span>:<span class="number">#00FF00</span>;&#125;	<span class="comment">/* 已被访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;<span class="attribute">color</span>:<span class="number">#FF00FF</span>;&#125;	<span class="comment">/* 鼠标指针移动到链接上 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;<span class="attribute">color</span>:<span class="number">#0000FF</span>;&#125;	<span class="comment">/* 正在被点击的链接 */</span></span><br></pre></td></tr></table></figure>

<p>当为链接的不同状态设置样式时，请按照以下次序规则：</p>
<ul>
<li>a:hover 必须位于 a:link 和 a:visited 之后</li>
<li>a:active 必须位于 a:hover 之后</li>
</ul>
<h3 id="常见的链接样式"><a href="#常见的链接样式" class="headerlink" title="常见的链接样式"></a>常见的链接样式</h3><p>在上面的例子中，链接根据其状态改变颜色。</p>
<p>让我们看看其他几种常见的设置链接样式的方法：</p>
<h4 id="文本修饰"><a href="#文本修饰" class="headerlink" title="文本修饰"></a>文本修饰</h4><p>text-decoration 属性大多用于去掉链接中的下划线：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;<span class="attribute">text-decoration</span>:none;&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;<span class="attribute">text-decoration</span>:none;&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;<span class="attribute">text-decoration</span>:underline;&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;<span class="attribute">text-decoration</span>:underline;&#125;</span><br></pre></td></tr></table></figure>

<h3 id="背景色-1"><a href="#背景色-1" class="headerlink" title="背景色"></a>背景色</h3><p>background-color 属性规定链接的背景色：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;<span class="attribute">background-color</span>:<span class="number">#B2FF99</span>;&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;<span class="attribute">background-color</span>:<span class="number">#FFFF85</span>;&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;<span class="attribute">background-color</span>:<span class="number">#FF704D</span>;&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;<span class="attribute">background-color</span>:<span class="number">#FF704D</span>;&#125;</span><br></pre></td></tr></table></figure>

<h2 id="CSS-列表"><a href="#CSS-列表" class="headerlink" title="CSS 列表"></a><a href="https://www.w3school.com.cn/css/css_list.asp" target="_blank" rel="noopener">CSS 列表</a></h2><p><strong>CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。</strong></p>
<h3 id="CSS-列表属性"><a href="#CSS-列表属性" class="headerlink" title="CSS 列表属性"></a>CSS 列表属性</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_list-style.asp" target="_blank" rel="noopener">list-style</a></td>
<td align="left">简写属性。用于把所有用于列表的属性设置于一个声明中。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_list-style-image.asp" target="_blank" rel="noopener">list-style-image</a></td>
<td align="left">将图象设置为列表项标志。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_list-style-position.asp" target="_blank" rel="noopener">list-style-position</a></td>
<td align="left">设置列表中列表项标志的位置。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_list-style-type.asp" target="_blank" rel="noopener">list-style-type</a></td>
<td align="left">设置列表项标志的类型。</td>
</tr>
</tbody></table>
<h2 id="CSS-表格"><a href="#CSS-表格" class="headerlink" title="CSS 表格"></a><a href="https://www.w3school.com.cn/css/css_table.asp" target="_blank" rel="noopener">CSS 表格</a></h2><p><strong>CSS 表格属性可以帮助您极大地改善表格的外观。</strong></p>
<h3 id="CSS-表格属性"><a href="#CSS-表格属性" class="headerlink" title="CSS 表格属性"></a>CSS 表格属性</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp" target="_blank" rel="noopener">border-collapse</a></td>
<td align="left">设置是否把表格边框合并为单一的边框。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_tab_border-spacing.asp" target="_blank" rel="noopener">border-spacing</a></td>
<td align="left">设置分隔单元格边框的距离。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_tab_caption-side.asp" target="_blank" rel="noopener">caption-side</a></td>
<td align="left">设置表格标题的位置。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_tab_empty-cells.asp" target="_blank" rel="noopener">empty-cells</a></td>
<td align="left">设置是否显示表格中的空单元格。</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp" target="_blank" rel="noopener">table-layout</a></td>
<td align="left">设置显示单元、行和列的算法。</td>
</tr>
</tbody></table>
<h2 id="CSS-轮廓"><a href="#CSS-轮廓" class="headerlink" title="CSS 轮廓"></a>CSS 轮廓</h2><p><strong>轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</strong></p>
<p><strong>CSS outline 属性规定元素轮廓的样式、颜色和宽度。</strong></p>
<h3 id="CSS-边框属性"><a href="#CSS-边框属性" class="headerlink" title="CSS 边框属性"></a>CSS 边框属性</h3><p>“CSS” 列中的数字指示哪个 CSS 版本定义了该属性。</p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
<th align="left">CSS</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_outline.asp" target="_blank" rel="noopener">outline</a></td>
<td align="left">在一个声明中设置所有的轮廓属性。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_outline-color.asp" target="_blank" rel="noopener">outline-color</a></td>
<td align="left">设置轮廓的颜色。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_outline-style.asp" target="_blank" rel="noopener">outline-style</a></td>
<td align="left">设置轮廓的样式。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.w3school.com.cn/cssref/pr_outline-width.asp" target="_blank" rel="noopener">outline-width</a></td>
<td align="left">设置轮廓的宽度。</td>
<td align="left">2</td>
</tr>
</tbody></table>
<h1 id="CSS-框模型"><a href="#CSS-框模型" class="headerlink" title="CSS 框模型"></a>CSS 框模型</h1><h2 id="CSS-框模型概述"><a href="#CSS-框模型概述" class="headerlink" title="CSS 框模型概述"></a>CSS 框模型概述</h2><p><strong>CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。</strong></p>
<p>元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。</p>
<p><strong>提示：</strong>背景应用于由内容和内边距、边框组成的区域。</p>
<p>内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：</p>
<h2 id="背景与边框"><a href="#背景与边框" class="headerlink" title="背景与边框"></a>背景与边框</h2>
    </div>

    
    
    
      


      <footer class="post-footer">
          
          <div class="post-tags">
              <a href="/tags/CSS/" rel="tag"><i class="fa fa-tag"></i> CSS</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/08/09/Web/HTML%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" rel="prev" title="HTML基本内容">
      <i class="fa fa-chevron-left"></i> HTML基本内容
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/09/03/Python/%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%BA%8C%E7%BA%A7Python%E5%9F%BA%E7%A1%80/" rel="next" title="二级Python基础">
      二级Python基础 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-简介"><span class="nav-number">1.</span> <span class="nav-text">CSS 简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-概述"><span class="nav-number">1.1.</span> <span class="nav-text">CSS 概述</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#样式解决了一个普遍的问题"><span class="nav-number">1.1.1.</span> <span class="nav-text">样式解决了一个普遍的问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#样式表极大地提高了工作效率"><span class="nav-number">1.1.2.</span> <span class="nav-text">样式表极大地提高了工作效率</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多重样式将层叠为一个"><span class="nav-number">1.1.3.</span> <span class="nav-text">多重样式将层叠为一个</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#层叠次序-优先顺序"><span class="nav-number">1.1.3.1.</span> <span class="nav-text">层叠次序(优先顺序)</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-基础语法"><span class="nav-number">1.2.</span> <span class="nav-text">CSS 基础语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-语法"><span class="nav-number">1.2.1.</span> <span class="nav-text">CSS 语法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#值的不同写法和单位"><span class="nav-number">1.2.2.</span> <span class="nav-text">值的不同写法和单位</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#记得写引号"><span class="nav-number">1.2.3.</span> <span class="nav-text">记得写引号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多重声明："><span class="nav-number">1.2.4.</span> <span class="nav-text">多重声明：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#空格和大小写"><span class="nav-number">1.2.5.</span> <span class="nav-text">空格和大小写</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-高级语法"><span class="nav-number">1.3.</span> <span class="nav-text">CSS 高级语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#选择器的分组"><span class="nav-number">1.3.1.</span> <span class="nav-text">选择器的分组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#继承及其问题"><span class="nav-number">1.3.2.</span> <span class="nav-text">继承及其问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#友善地对待Netscape-4"><span class="nav-number">1.3.3.</span> <span class="nav-text">友善地对待Netscape 4</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#继承是一个诅咒吗？"><span class="nav-number">1.3.4.</span> <span class="nav-text">继承是一个诅咒吗？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-派生选择器"><span class="nav-number">1.4.</span> <span class="nav-text">CSS 派生选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#派生选择器"><span class="nav-number">1.4.1.</span> <span class="nav-text">派生选择器</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-id-选择器"><span class="nav-number">1.5.</span> <span class="nav-text">CSS id 选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#id-选择器"><span class="nav-number">1.5.1.</span> <span class="nav-text">id 选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#id-选择器和派生选择器"><span class="nav-number">1.5.2.</span> <span class="nav-text">id 选择器和派生选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#一个选择器，多种用法"><span class="nav-number">1.5.2.1.</span> <span class="nav-text">一个选择器，多种用法</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#单独的选择器"><span class="nav-number">1.5.3.</span> <span class="nav-text">单独的选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-类选择器"><span class="nav-number">1.5.4.</span> <span class="nav-text">CSS 类选择器</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#创建-CSS"><span class="nav-number">1.6.</span> <span class="nav-text">创建 CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#如何插入样式表"><span class="nav-number">1.6.1.</span> <span class="nav-text">如何插入样式表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#外部样式表"><span class="nav-number">1.6.2.</span> <span class="nav-text">外部样式表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#内部样式表"><span class="nav-number">1.6.3.</span> <span class="nav-text">内部样式表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#内联样式"><span class="nav-number">1.6.4.</span> <span class="nav-text">内联样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多重样式"><span class="nav-number">1.6.5.</span> <span class="nav-text">多重样式</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS样式"><span class="nav-number">2.</span> <span class="nav-text">CSS样式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-背景"><span class="nav-number">2.1.</span> <span class="nav-text">CSS 背景</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#背景色"><span class="nav-number">2.1.1.</span> <span class="nav-text">背景色</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景图像"><span class="nav-number">2.1.2.</span> <span class="nav-text">背景图像</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景重复"><span class="nav-number">2.1.3.</span> <span class="nav-text">背景重复</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景定位"><span class="nav-number">2.1.4.</span> <span class="nav-text">背景定位</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#关键字"><span class="nav-number">2.1.5.</span> <span class="nav-text">关键字</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#百分数值"><span class="nav-number">2.1.6.</span> <span class="nav-text">百分数值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#长度值"><span class="nav-number">2.1.7.</span> <span class="nav-text">长度值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景关联"><span class="nav-number">2.1.8.</span> <span class="nav-text">背景关联</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-背景属性"><span class="nav-number">2.1.9.</span> <span class="nav-text">CSS 背景属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-背景实例"><span class="nav-number">2.1.10.</span> <span class="nav-text">CSS 背景实例</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-文本"><span class="nav-number">2.2.</span> <span class="nav-text">CSS 文本</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-文本属性"><span class="nav-number">2.3.</span> <span class="nav-text">CSS 文本属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-字体"><span class="nav-number">2.4.</span> <span class="nav-text">CSS 字体</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-字体属性"><span class="nav-number">2.4.1.</span> <span class="nav-text">CSS 字体属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-链接"><span class="nav-number">2.5.</span> <span class="nav-text">CSS 链接</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#设置链接的样式"><span class="nav-number">2.5.1.</span> <span class="nav-text">设置链接的样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常见的链接样式"><span class="nav-number">2.5.2.</span> <span class="nav-text">常见的链接样式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#文本修饰"><span class="nav-number">2.5.2.1.</span> <span class="nav-text">文本修饰</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景色-1"><span class="nav-number">2.5.3.</span> <span class="nav-text">背景色</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-列表"><span class="nav-number">2.6.</span> <span class="nav-text">CSS 列表</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-列表属性"><span class="nav-number">2.6.1.</span> <span class="nav-text">CSS 列表属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-表格"><span class="nav-number">2.7.</span> <span class="nav-text">CSS 表格</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-表格属性"><span class="nav-number">2.7.1.</span> <span class="nav-text">CSS 表格属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-轮廓"><span class="nav-number">2.8.</span> <span class="nav-text">CSS 轮廓</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS-边框属性"><span class="nav-number">2.8.1.</span> <span class="nav-text">CSS 边框属性</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-框模型"><span class="nav-number">3.</span> <span class="nav-text">CSS 框模型</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-框模型概述"><span class="nav-number">3.1.</span> <span class="nav-text">CSS 框模型概述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#背景与边框"><span class="nav-number">3.2.</span> <span class="nav-text">背景与边框</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Lanqilu"
      src="http://img.whl123456.top/image/avatar.jpg">
  <p class="site-author-name" itemprop="name">Lanqilu</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">85</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">39</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/lanqilu" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lanqilu" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=zqKvoL_noruOqKG2o6_nouCtoaM" title="E-Mail → http:&#x2F;&#x2F;mail.qq.com&#x2F;cgi-bin&#x2F;qm_share?t&#x3D;qm_mailme&amp;email&#x3D;zqKvoL_noruOqKG2o6_nouCtoaM" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
  </div>



      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 2019 – 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Lanqilu</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/pjax/pjax.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

  <script>
var pjax = new Pjax({
  selectors: [
    'head title',
    '#page-configurations',
    '.content-wrap',
    '.post-toc-wrap',
    '.languages',
    '#pjax'
  ],
  switches: {
    '.post-toc-wrap': Pjax.switches.innerHTML
  },
  analytics: false,
  cacheBust: false,
  scrollTo : !CONFIG.bookmark.enable
});

window.addEventListener('pjax:success', () => {
  document.querySelectorAll('script[data-pjax], script#page-configurations, #pjax script').forEach(element => {
    var code = element.text || element.textContent || element.innerHTML || '';
    var parent = element.parentNode;
    parent.removeChild(element);
    var script = document.createElement('script');
    if (element.id) {
      script.id = element.id;
    }
    if (element.className) {
      script.className = element.className;
    }
    if (element.type) {
      script.type = element.type;
    }
    if (element.src) {
      script.src = element.src;
      // Force synchronous loading of peripheral JS.
      script.async = false;
    }
    if (element.dataset.pjax !== undefined) {
      script.dataset.pjax = '';
    }
    if (code !== '') {
      script.appendChild(document.createTextNode(code));
    }
    parent.appendChild(script);
  });
  NexT.boot.refresh();
  // Define Motion Sequence & Bootstrap Motion.
  if (CONFIG.motion.enable) {
    NexT.motion.integrator
      .init()
      .add(NexT.motion.middleWares.subMenu)
      .add(NexT.motion.middleWares.postList)
      .bootstrap();
  }
  NexT.utils.updateSidebarPosition();
});
</script>




  




  
<script src="/js/local-search.js"></script>













    <div id="pjax">
  

  

  

    </div>
</body>
</html>
